import PhotoAlbum from 'react-photo-album';
import './gridGallery.css';

export const TaskCarddPhotoGallery = ({
  files,
  onClick
}: {
  files: TaskFile[];
  onClick: (prop: number) => void;
}) => {
  const file = files.map(({ small, type, icon }: TaskFile) => {
    return {
      src: type === 'img' ? small : icon,
      width: 1080,
      height: 694,
      srcSet: [
        {
          src: type === 'img' ? small : icon,
          width: 1080,
          height: 694
        }
      ]
    };
  });

  const photo = file.length > 4 ? file.slice(0, 4) : file;

  return (
    <PhotoAlbum
      photos={photo}
      layout='rows'
      spacing={4}
      targetRowHeight={20}
      renderRowContainer={({ children }) => {
        return (
          <div
            className={`grid aspect-video gap-1 ${'grid-p-' + (photo?.length >= 4 ? '4' : photo?.length?.toString())
              }`}
          >
            {children}
          </div>
        );
      }}
      renderPhoto={({ photo, layout }) => {
        if (files.length > 4 && layout.photoIndex === 3) {
          return (
            <div
              className={`galleryItem relative ${'c-' + (layout.photoIndex + 1) + '' + layout.photosCount
                } 
                className='border rounded-[8px] overflow-hidden`}
              onClick={(e) => {
                e.stopPropagation();
                onClick(3);
              }}
            >
              <div className='absolute left-0 top-0 z-[1] flex h-full w-full items-center justify-center bg-[rgba(0,0,0,0.7)]'>
                <span className='text-white'>+{files.length - 3}</span>
              </div>
              <img
                src={photo.src}
                style={{
                  objectFit: 'cover',
                  minWidth: '100%',
                  height: '100%'
                }}
                className='border rounded-[8px]'
              />
            </div>
          );
        }
        return (
          <div
            className={`galleryItem ${'c-' + (layout.photoIndex + 1) + '' + layout.photosCount}`}
            onClick={(e) => {
              e.stopPropagation();
              onClick(layout.photoIndex);
            }}
          >
            <img
              src={photo.src}
              style={{
                objectFit: 'cover',
                minWidth: '100%',
                height: '100%'
              }}
              className='border rounded-[8px]'
            />
          </div>
        );
      }}
    />
  );
};
